import { ProjectProps } from '@/type'
import { fadeInUp } from '@/utils/animations'
import { cn } from '@/utils/cn'
import { motion } from 'framer-motion'
import { FC } from 'react'
const Projects: FC<ProjectProps> = ({ projects }) => {
  return (
    <motion.section className="space-y-6" variants={fadeInUp}>
      <h2 className="text-2xl font-bold">项目经验</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {projects.map((project, index) => (
          <motion.div
            key={index}
            className={cn(
              'space-y-3 p-4 rounded-lg relative',
              'bg-white/5 hover:bg-white/10 transition'
            )}
            initial={{ x: 20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ delay: index * 0.2 }}
            whileHover={{ scale: 1.02 }}
          >
            <div className="flex justify-between items-start">
              <h3 className="text-xl font-semibold">{project.title}</h3>
              <a
                href={project.link}
                className="text-gray-400 hover:text-white transition-colors"
                target="_blank"
                rel="noopener noreferrer"
              >
                <svg
                  className="w-6 h-6"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path
                    fillRule="evenodd"
                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                    clipRule="evenodd"
                  />
                </svg>
              </a>
            </div>
            <p className="text-gray-300">{project.description}</p>
            <div className="flex flex-wrap gap-2">
              {project.techStack.map(tech => (
                <span
                  key={tech}
                  className="px-2 py-1 text-sm bg-[#42B883]/20 text-[#42B883] rounded"
                >
                  {tech}
                </span>
              ))}
            </div>
            <ul className="list-disc list-inside text-gray-300 space-y-1">
              {project.highlights.map((highlight, i) => (
                <li key={i}>{highlight}</li>
              ))}
            </ul>
            <a
              href={project.link}
              className="text-[#42B883] hover:text-blue-300 inline-block"
            >
              查看项目 →
            </a>
          </motion.div>
        ))}
      </div>
    </motion.section>
  )
}
export default Projects
